.jx {
    width: 375px;
    margin: 100px auto;
    display: block;
}
.jx .ysu{float:left;    margin-top: 0;}
.jx .ti {
    float: left;
    width: 100%;
    font-size: 18px;
    text-align: center;
    color: #2a2a2a;
    line-height: 36px;    margin-bottom: 6px;
}
.jx .y_info{line-height:24px;font-size: 14px;color: #999fb1;text-align: center;}
.jx .mfbtn{background: #00c8d5;width: 240px;height: 46px;    margin-left: 170px;display: inline-block;line-height: 46px;color: #fff;font-size: 16px;    margin-top: 36px;text-align: center;
    box-shadow: 0 2px 5px #dedede;
    float: right;margin-right: 70px;}
.L_transform{float: left;width: 375px;height: 310px;margin-top: 35px;}
.L_transform .trans_bg{position: relative;float: left;margin-left: 26px;width:300px;height:300px;}

.L_transform .bg_shade {
    background: url(../images/quan_bg.png) no-repeat;
    width: 419px;
    height: 390px;
    position: absolute;
    left: -56px;
    top: -39px;
}
.L_transform .trans_bg .circles{position: absolute;}

.trans_bg .t1{left:60px;top:0px;}
.trans_bg .r1{left: 160px;top: 25px;}
.trans_bg .l1{left:210px;top:66px;}
.trans_bg .b1{left:190px;top:125px;}
.trans_bg .u1{left:180px;top:190px;}



.trans_bg .t2{left:120px;top:180px;}
.trans_bg .r2{left: 80px;top: 150px;}
.trans_bg .l2{left:10px;top:85px;}
.trans_bg .b2{left:30px;top:50px;}
/*.trans_bg .u2{left:180px;top:200px;}*/



/* .trans_bg .trio{color: #ffffff;font-size: 16px;text-align: center;margin: 0 auto;width: 10px;height: 10px;background: #00c8d4;position: absolute;border-radius: 50%;} */
.trans_bg .trio p{width: 38px;margin-left: 11px;margin-top: 8px;}
.trans_bg .circles.active .trio i{
    width:10px;
    height:10px;
    border-radius: 50%;
    background:#FC5555;
    float: left;
    top: 43px;
    left: 35px;
    /*background: url(../images/quan_active.png) no-repeat;*/
    display: inline-block;
    position: absolute;
   animation: redanimations 1s linear infinite;
  
}


@-webkit-keyframes redanimations{
    0%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
    50%{box-shadow:0 0 10px 2px rgba(191,2,2,.3);}
    100%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
}
@-moz-keyframes redanimations{/* Firefox */
    0%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
    50%{box-shadow:0 0 10px 2px rgba(191,2,2,.3);}
    100%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
}
@keyframes redanimations{
    0%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
    50%{box-shadow:0 0 10px 2px rgba(191,2,2,.3);}
    100%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
}

.trans_bg .heart_box{width: 301px;display: inline-block;height: 300px;}
.trans_bg .heart_box .heart{position:absolute;width:260px;height:260px;background: url(../images/quan_circle.png) no-repeat;left: 20px;top: 18px;
     background-size:cover;
     -webkit-background-size:cover;
     z-index: -1;

}
.trans_bg .heart_box .shan{width: 105px;height: 129px;background: url(../images/quan_rotate.png) no-repeat;top: 25px;left: 42px;position: absolute;
    -webkit-transform-origin: 107px 124px;
    transform-origin: 108px 124px;
    transform: rotate(0deg);
    animation: radar 60s linear infinite;
}
@keyframes radar{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
